import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom';
import Head from '../../components/head'
import { Card, Image, Tabs, Notify } from 'react-vant';
import { SettingO, LocationO, Tosend, Edit } from '@react-vant/icons';
import Team from '../../components/My/Team';
import Project from '../../components/My/Project';
import Leave from '../../components/My/Leave';
import axios from 'axios';



const items = ['项目', '团队', '请假']
// 声明变量

const My = () => {
    const [value, setValue] = useState('')

    const navigate = useNavigate(); // 路由跳转proxy
    const [data, setData] = React.useState([]);
    const [active, setActive] = useState(true);
    // 从后台服务器获取数据并进行渲染操作
    const shuju = async () => {
        const res = await axios.get('http://192.168.0.154:3000/my/posts')
        // 获取本地存储
        const www = localStorage.getItem('index')
        setData(res.data[www])
    }
    React.useEffect(() => {
        shuju()
    }, [])
    return (
        <>
            <div style={{ width: '335px', margin: '0 auto' }}>
                <Head />
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '20px 0px 20px 10px' }}>
                    <h2>我的主页</h2>
                    <div style={{ width: '48px', height: '48px', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '14px' }}>
                        <SettingO fontSize={30} onClick={() => {
                            // 跳转
                            navigate('/setup')
                        }} />
                    </div>

                </div>
                <Card round style={{ position: 'relative' }}>
                    <Image width={64} height={64} src={data.avatar} round style={{ marginTop: '20px' }} onClick={() => {
                        console.log(value);
                    }} />
                    <Card.Header>{data.name}</Card.Header>
                    <div>
                        <Card.Body>{data.posts}</Card.Body>
                    </div>
                    <div style={{ width: '44px', height: '44px', textAlign: "center", backgroundColor: 'rgb(244, 249, 253)', borderRadius: '14px', position: 'absolute', right: '15px', top: '20px' }}>
                        <Edit style={{ marginTop: '10px' }} fontSize={25} onClick={() => {
                            setActive(!active)
                            if (active === false) {
                                Notify.show({ type: 'success', message: '修改成功！' })
                            }
                        }} />
                    </div>
                    <hr style={{ margin: '20px 0px' }} />

                    <div>
                        <Card.Header>主要信息</Card.Header>
                    </div>
                    <div>
                        <Card.Body style={{ marginBottom: '10px' }}>职位</Card.Body>
                        <div style={{ textAlign: 'center' }}>
                            <input type="text" value={value} 
                                onChange={(v) => {
                                    setValue(v.target.value)
                                }}
                                placeholder={data.posts} style={{ width: '295px', height: '20px', borderRadius: "14px", border: "1px solid rgb(216, 224, 240)", textIndent: '10px' }} disabled={active} />
                        </div>
                    </div>
                    <div>
                        <Card.Body style={{ marginBottom: '10px' }}>公司</Card.Body>
                        <div style={{ textAlign: 'center' }}>
                            <input type="text" placeholder={data.firm} style={{ width: '295px', height: '20px', borderRadius: "14px", border: "1px solid rgb(216, 224, 240)", textIndent: '10px' }} disabled={active} />
                        </div>
                    </div>

                    <div>
                        <Card.Body style={{ marginBottom: '10px' }}>位置</Card.Body>
                        <div style={{ textAlign: 'center', position: 'relative' }}>
                            <input type="text" placeholder={data.location} style={{ width: '295px', height: '20px', borderRadius: "14px", textIndent: '10px', border: "1px solid rgb(216, 224, 240)" }} disabled={active} />
                            <LocationO style={{ position: 'absolute', right: '30px', top: '15px', fontSize: '20px' }} />
                        </div>
                    </div>
                    <div>
                        <Card.Body style={{ marginBottom: '10px' }}>出生日期</Card.Body>
                        <div style={{ textAlign: 'center', position: 'relative' }}>
                            <input type="text" placeholder={data.birthday} style={{ width: '295px', height: '20px', borderRadius: "14px", textIndent: '10px', border: "1px solid rgb(216, 224, 240)", fontSize: "17px" }} disabled={active} />
                            <Tosend style={{ position: 'absolute', right: '30px', top: '15px', fontSize: '20px' }} />
                        </div>
                    </div>
                    <div>
                        <Card.Header>联系方式</Card.Header>
                    </div>
                    <div>
                        <Card.Body style={{ marginBottom: '10px' }}>Emali</Card.Body>
                        <div style={{ textAlign: 'center', position: 'relative' }}>
                            <input type="text" placeholder={data.email} style={{ width: '295px', height: '20px', borderRadius: "14px", textIndent: '10px', border: "1px solid rgb(216, 224, 240)", fontSize: "17px" }} disabled={active} />
                        </div>
                    </div>
                    <div>
                        <Card.Body style={{ marginBottom: '10px' }}>手机号</Card.Body>
                        <div style={{ textAlign: 'center', position: 'relative' }}>
                            <input type="text" placeholder={data.shouji} style={{ width: '295px', height: '20px', borderRadius: "14px", textIndent: '10px', border: "1px solid rgb(216, 224, 240)" }} disabled={active} />
                        </div>
                    </div>
                    <div style={{ marginBottom: "20px" }}>
                        <Card.Body style={{ marginBottom: '10px' }}>钉钉</Card.Body>
                        <div style={{ textAlign: 'center', position: 'relative' }}>
                            <input type="text" placeholder={data.dingding} style={{ width: '295px', height: '20px', borderRadius: "14px", textIndent: '10px', border: "1px solid rgb(216, 224, 240)" }} disabled={active} />
                        </div>
                    </div>
                </Card>
                <Tabs border type='capsule' style={{ marginTop: '20px' }}>
                    {items.map(item => (
                        <Tabs.TabPane key={item} title={item}>
                            <div>
                                {item === "项目" && (
                                    <Project />
                                )}
                                {item === "团队" && (
                                    <Team />
                                )}
                                {item === "请假" && (
                                    <Leave />
                                )}
                            </div>

                        </Tabs.TabPane>
                    ))}
                </Tabs>
            </div>
        </>
    )
}

export default My